<template>
    <video id="video" controls autoplay muted width="100%" height="100%"></video>
</template>
<script>
    import { defineComponent, onMounted,onBeforeUnmount,onActivated,onDeactivated, reactive, ref, toRefs, watch, nextTick } from 'vue';
    import  "../../util/webrtcstreamer";
    import  "../../util/adapter.min.js";
    export default defineComponent({
        props:['videoSrc'],
        setup(props) {
            const map = ref(null);
            const webRtcServer = ref();
            // webrtc服务器地址
            const IP = "http://127.0.0.1:8000";
            onMounted(() => {
                initVideo();
            });
            onBeforeUnmount(() => {
                destroyVideo();
            });
            watch(()=>props.videoSrc,()=>{
                destroyVideo();
                nextTick(()=>{
                    initVideo();
                })
            })
            // 页面激活
            onActivated(() => {
                // 缓存页面 打开页面 实现播放
                const video = document.getElementById("video");
                video.paused && video.play();
            });
            // 页面停用
            onDeactivated(() => {
                // 缓存页面 离开页面 实现暂停
                const video = document.getElementById("video");
                video.play && video.pause();
            });
            // 创建视频实例
            const initVideo = () => {
                webRtcServer.value = new WebRtcStreamer("video", IP);
                //需要查看的rtsp地址,根据自己的摄像头传入对应的rtsp地址即可。
                //注意：视频编码格式必须是H264的，否则无法正常显示，编码格式可在摄像头的后台更改
                webRtcServer.value.connect(
                    // "rtsp://admin:qzbxgh123.@172.19.81.42:554/h265/ch1/main/av_stream"
                    props.videoSrc
                );
            };
            // 销毁视频实例
            const destroyVideo = () => {
                webRtcServer.value &&
                (webRtcServer.value.disconnect(), (webRtcServer.value = null));
            };
            return {
            }
        }
    })
</script>
<!--
<template>
    <video id="video" autoplay width="600" height="400"></video>
</template>

<script>
import {defineComponent, onMounted, ref} from 'vue';
import WebRtcStreamer from '../../util/webrtcstreamer'
export default defineComponent({
    setup() {
        const webRtcServer = null;
        onMounted(()=>{
           webRtcServer.value = new WebRtcStreamer('video','http://127.0.0.1:8000');
           /* this.webRtcServer.connect(
                "rtsp://admin:qzbxgh123.@172.19.89.6:554/media/video1"//这是填自己的rtsp流
            );*/
        })
        return {
            webRtcServer
        }
    }
});

    /*export default defineComponent({
        setup() {
            const webRtcServer = ref(null);
            const webRtcServer1 =  ref(null);

            onMounted(() => {
                this.webRtcServer.value = new WebRtcStreamer(
                    "video",
                    'http://192.168.8.1:8000'//本机ip+端口8000
                );

                this.webRtcServer.connect(
                    "rtsp://admin:qzbxgh123.@172.19.89.6:554/media/video1"//这是填自己的rtsp流
                );
            })
        }
    });*/


</script>-->
